<template>
<!-- 级联选择器组件 -->
  <div class="cascader">
    <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover' }"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script>
import { request } from "../../api/request";
export default {
  props:['cascade'],
  data() {
    return {
      // 级联选择器数据
      value: [],
      options: [],
      // 存储 级联选择器一级菜单id
      firstid: -1,
      catalougeid: -1, //科目id
      chapter: -1, // 章节 id
    };
  },
  created() {
    this.getCatalogueAll();
    this.value = this.cascade
  },
  methods: {
    // 获取所有科目
    getCatalogueAll() {
      request({
        method: "GET",
        url: "catalogue",
        route: "all",
      }).then((res) => {
        res.data.forEach((item) => {
          let children = [];
          item.chapters.forEach((childitem) => {
            let childrens = {
              value: childitem.id,
              label: childitem.title,
            };
            children.push(childrens);
          });
          let items = {
            value: item.id,
            label: item.title,
            children,
          };
          this.options.push(items);
        });
      });
    },
    // 监听级联选择器变化
    handleChange(value) {
      console.log(value);
      this.catalougeid = value[0];
      this.chapterid = value[1];
      this.$emit('getid',this.catalougeid,this.chapterid)
    }
  },
};
</script>